<template>
    <div class="base-info" v-if="Object.keys(goods).length !== 0">
        <div class="title">{{goods.title}}</div>
        <div class="price">
            <span class="new-price">{{goods.newPrice}}</span>
            <span class="old-price">￥<s>{{goods.oldPrice}}</s></span>
            <span v-show="goods.discount" class="discount" :style="{background: goods.BgColor}">{{goods.discount}}</span>
        </div>
        <div class="collect">
            <span>{{goods.columns[0]}}</span>
            <span>{{goods.columns[1]}}</span>
            <span>{{goods.services[goods.services.length - 1].name}}</span>
        </div>
        <div class="services">
            <div class="services-item" v-for="index in goods.services.length - 1" :key="index">
                <img :src="goods.services[index - 1].icon" alt="">
                <span>{{goods.services[index - 1].name}}</span>
            </div>
        </div>
        <!-- <div v-for="item in goods.services.length - 1">
            <div>{{item}}</div>
        </div> -->
        
    </div>
    
</template>

<script>
export default {
    props: {
        goods: {
            type: Object,
            default() {
                return {}
            }
        }
    }
}
</script>


<style scoped>
    .title{
        margin-top: 8px;
        color: #333;
        font-size: 18px;
    }

    .price{
        margin-top: 8px;
    }

    .price .new-price{
        font-size: 28px;
        color: var(--color-tint);
        margin-right: 5px;
    }

    .price .old-price{
        font-size: 17px;
        color: #a39a9a;
    }

    .price .discount{
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        /* background: var(--color-tint); */
        border-radius: 15px;
        padding: 6px;
        margin-left: 5px;
        vertical-align: 8px;
    }

    .collect{
        display: flex;
        /* text-align: center; */
        justify-content: space-between;
        margin: 28px 3px;
        font-size: 14px;
        color: #a39a9a;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }

    .collect span{
        /* flex: 1; */
    }

    .services{
        display: flex;
        justify-content: space-between;
        margin: 3px;
        font-size: 15px;
        color: #333;
    }

    .services .services-item{
        /* flex: 1; */
    }

    .services .services-item img{
        width: 16px;
        vertical-align: top;
    }
</style>